<template>
  <div class="container">
    <div class="table" v-loading="loading" v-show="!mode">
      <div ref="queryform" class="queryform">
        <div class="clearfix">
          <div class="left item">
            <label class="label-size">国家：</label>
            <el-select size="small" v-model="treeSearchData.country" placeholder="请选择" style="width:160px;">
              <el-option v-for="item in countryList" :key="item.id" :label="item.areaName" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="left item">
            <label class="label-size">园区：</label>
            <el-select size="small" v-model="treeSearchData.park" placeholder="请选择" style="width:160px;">
              <el-option v-for="item in parkList" :key="item.id" :label="item.areaName" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="right item">
            <el-button @click="resetSearchTree" size="small" icon="el-icon-refresh" class="default-btn">重置</el-button>
            <el-button @click="searchListTree" size="small" icon="el-icon-search" class="plain-btn">查询</el-button>
          </div>
        </div>
      </div>
      <div class="container-content">
        <div class="left-box">
          <MindMap :mindData="mindData" @node_click="nodeClick"></MindMap>
        </div>
        <div class="right-box  table-body">
          <div ref="queryform" class="queryform">
            <div class="clearfix">
              <div class="left item">
                <el-input size="small" style="width:260px;" placeholder="请输入姓名" v-model="formField.name"></el-input>
              </div>
              <div class="left item">
                <el-input size="small" style="width:160px;" placeholder="请输入外号" v-model="formField.nickName"></el-input>
              </div>
              <div class="left item">
                <el-input size="small" style="width:160px;" placeholder="请输入身份证" v-model="formField.cardId"></el-input>
              </div>
              <div class="right item">
                <el-button @click="searchList" size="small" icon="el-icon-search" class="plain-btn">查询</el-button>
              </div>
            </div>
          </div>
          <el-table :data="tableData" :border="false" style="width: 100%">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="nickName" label="外号"></el-table-column>
            <el-table-column prop="cardId" label="身份证号"></el-table-column>
          </el-table>
          <div class="clearfix">
            <el-pagination style="text-align: center" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :current-page="pagination.pageIndex"
              :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import table from '@/mixins/table.js'
import { sandbox, downloadFile } from '@/libs/util'
import MindMap from './components/MindMap.vue';
export default {
  mixins: [table],
  components: { MindMap },
  data() {
    return {
      formField: sandbox({
        cardId: '',
        fraudOrgId: '',
        nickName: '',
        name: ''
      }),
      treeSearchData: {
        country: '',
        park: ''
      },
      tableData: [],
      mindData: null,
      parkList: [], // 园区
      countryList: [], //国家
    }
  },
  mounted() {
    this.loadtelecomFraudOrgAreaTypeList('country');
    this.loadtelecomFraudOrgAreaTypeList('park');

    this.LoadTelecomFraudOrgAreaOrgTree();
    //
  },
  methods: {
    loadtelecomFraudOrgAreaTypeList(type = 'park') {
      this.$api
        .telecomFraudOrgAreaTypeList({
          param: { type: type }
        })
        .then(res => {
          if (type == 'park') {
            this.parkList = [{ areaName: '全部', id: '' }].concat(res.data || [])
          } else {
            this.countryList = res.data || []
            this.treeSearchData.country = 1
          }
        })
    },
    resetSearchTree() {
      this.treeSearchData = {
        country: 1,
        park: 0
      };
      this.LoadTelecomFraudOrgAreaOrgTree();
    },
    searchListTree() {
      this.LoadTelecomFraudOrgAreaOrgTree();
      this.resetSearch();
    },
    nodeClick(e) {
      console.log('nodeClick', e);
      this.formField.fraudOrgId = e.id;
      this.searchList();
    },

    LoadTableDataMethod() {
      return this.$api
        .telecomFraudOrgAreaList({
          body: Object.assign(this.formField, this.pagination)
        })
        .then(res => {
          this.tableData = res.data.records
          this.pagination.currentPage = res.data.current
          this.pagination.pageSize = res.data.size
          this.pagination.total = res.data.total
        })
    },

    addTextField(areas) {
      if (!Array.isArray(areas)) return;

      areas.forEach(area => {
        area['data'] = {
          text: area.areaName
        };
        if (area.children) {
          this.addTextField(area.children);
        }
      });
    },
    LoadTelecomFraudOrgAreaOrgTree() {
      return this.$api
        .telecomFraudOrgAreaOrgTree({
          param: {
            country: this.treeSearchData.country,
            park: (this.treeSearchData.park == 0 ? '' : this.treeSearchData.park),
          }
        })
        .then(res => {
          // this.mindData = res.data[0];
          if (res.data) {
            if (res.data?.length > 0) {
              let newData = JSON.parse(JSON.stringify(res.data))
              this.addTextField(newData);
              this.mindData = newData[0] || {};
            }
          }
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.container-content {
  display: flex;
  align-items: center;
  padding-top: 20px;

  .left-box {
    flex: 1;
    height: calc(100vh - 240px);
    margin-right: 20px;
  }

  .right-box {
    width: 40%;
    height: calc(100vh - 240px);
    margin-top: 0;
    box-sizing: border-box;
  }
}
</style>
